<template>
	<view>
		
		<view class="bg-context">
			<view class="bg-contain">
				<text>{{msgDict.receiver}}</text>
				<input :placeholder="msgDict.plEnter + msgDict.receiver" v-model="memberName" />
			</view>
			
			<view class="bg-contain">
				<text>{{msgDict.mobile}}</text>
				<input :placeholder="msgDict.plEnter + msgDict.mobile" v-model="phoneNumber"/>
			</view>
			
			<view class="bg-contain">
				<text>{{msgDict.area}}</text>
				<input :placeholder="msgDict.area" v-model="address" disabled="false" @tap="showCityPicker" />
				<uni-icons type="arrowright" size="18" color="#333" style="width: 30px;"></uni-icons>
			</view>
			
			<view class="bg-contain bg-containBorder">
				<text>{{msgDict.address}}</text>
				<textarea fixed="true" auto-height="true" :placeholder="msgDict.plEnter + msgDict.address" v-model="detailAddress" />
			</view>
		</view>

		<view class="bg-getwx">
			<view class="setDefault">{{msgDict.setDefault}}</view>
			<label class="radio" @click="switchChange">
				<radio value="r1" :checked="defaultStatus" color="#5360FF"/>
			</label>
		</view>

		<view class="submit showBtnBackColor" @tap="submit">{{msgDict.submit}}</view>

		<!--省市区选择器底部控件-->
		<view>
			<mpvue-city-picker themeColor="#333333" ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault"
			 @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
	import {operateAddr} from '../../api/index.js'
	export default {
		data() {
			return {
				addressId:'',
				memberName: "",
				phoneNumber: "",
				province:'',
				city:'',
				region:'',
				msgDict:{},
				address: "",
				detailAddress: "",
				postCode: "",//邮编
				pickerValueDefault: [0, 0, 0],
				defaultStatus:0,//0:否 1:是
				isEdit:false//新增还是编辑
			}
		},
		
		onLoad:function(option){
			
			this.msgDict = getApp().globalData.$t('addrList');
			
			
			if(option.item === undefined ){
				return
			}
			if(option.length != 0){
				const item = JSON.parse(decodeURIComponent(option.item));
				this.addressId = item.id;
				this.memberName = item.contract;
				this.phoneNumber = item.phone;
				this.province = item.provice;
				this.city = item.city;
				this.region = item.county;
				this.detailAddress = item.adress;
				this.defaultStatus = item.izDefault;
				this.address = this.province+'-'+this.city+'-'+this.region

				if(this.addressId != undefined && this.addressId != ''){
					this.isEdit = true;
				}
			}
		},
		
		methods: {
			async addAddress(){
				try{
					let {data} = await operateAddr({
						"userId":getApp().globalData.userId,
						"izDefault":this.defaultStatus,
						"contract":this.memberName	,
						"phone":this.phoneNumber,
						"provice":this.province,
						"city":this.city,
						"county":this.region,
						"adress":this.detailAddress,
						"type":'1'
						})
					uni.navigateBack({
						delta: 1
					});
				}catch(err){
					console.log('zjk:',err)
				}
			},
			async updateAddress(){
				try{
					let {data} = await operateAddr({
						"userId":getApp().globalData.userId,
						"addressId":this.addressId,
						"izDefault":this.defaultStatus,
						"contract":this.memberName,
						"phone":this.phoneNumber,
						"provice":this.province,
						"city":this.city,
						"county":this.region,
						"adress":this.detailAddress,
						"type":'2'
						});
					uni.navigateBack({
						delta: 1
					});
				}catch(err){
					console.log('zjk:',err)
				}
			},
			/**
			 * 是否设为默认地址开关
			 */
			switchChange() {
				if (this.defaultStatus == 0) {
					//设为默认地址
					this.defaultStatus = 1;
				} else {
					this.defaultStatus = 0;
				}
			
			},
			/**
			 * 确定按钮this.length === 0 || !this.trim()
			 */
			submit() {
				if(this.memberName.length===0||!this.memberName.trim()){
					uni.showToast({
						title:this.msgDict.plEnter + this.msgDict.receiver,
						icon:'none',
						duration:1500
					});
					return;
				}
				if(this.phoneNumber.length===0||!this.phoneNumber.trim() ||!(/^(((0[0-9]{2})\d{8}|(0[0-9]{3}(\d{7,8}))|(0[0-9]{2})-\d{8}|(0[0-9]{3}-(\d{7,8})))|(((13[0-9])|(14[5,7,9])|(15([0-3]|[5-9]))|(166)|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[8|9]))\d{8}))$/.test(this.phoneNumber))){
					uni.showToast({
						title:this.msgDict.correctPhone,
						icon:'none',
						duration:1500
					});
					return;
				}
				if(this.address.length===0||!this.address.trim()){
					uni.showToast({
						title:this.msgDict.select + this.msgDict.area,
						icon:'none',
						duration:1500
					});
					return;
				}
				if(this.detailAddress.length===0||!this.detailAddress.trim()){
					uni.showToast({
						title:this.msgDict.plEnter + this.msgDict.address,
						icon:'none',
						duration:1500
					});
					return;
				}
				let pages = getCurrentPages();
				let page = pages[pages.length - 2];
				page.$vm.isRefresh = true;
				if(this.isEdit){
					//编辑地址接口
					this.updateAddress();
				}else{
					//新增地址接口
					this.addAddress();
				}
				console.log(this.addressId+ this.memberName + this.phoneNumber + this.province+this.city+this.region + this.detailAddress + this.postCode+this.defaultStatus)
			},
			/**
			 * 省市区三级联动
			 */
			showCityPicker() {
				this.$refs.mpvueCityPicker.show();
			},
			onConfirm(e) {
				var result = JSON.parse(JSON.stringify(e))
				let addr = result.label.split('-');
				this.address = result.label;
				this.province = addr[0];
				this.city = addr[1];
				this.region = addr[2];
			}
		},
		components: {
			mpvueCityPicker
		}
	}
</script>

<style>
	page {
		height: 100%;
		background: #F6F6F6;
	}

	.bg-getwx {
		height: 80upx;
		margin-top: 20upx;
		background: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-right: 20rpx;
	}

	.wx-bg {
		width: 55upx;
		height: 55upx;
		margin-left: 27upx;
	}

	

	#ic-arrow {
		width: 11upx;
		height: 20upx;
		margin-right: 20upx;
		margin-left: auto
	}

	.bg-context {
		background: #FFFFFF;
		padding-bottom: 70upx;
		padding-right: 30rpx;
	
	}

	.bg-contain {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 108rpx;
		border-bottom: 1rpx solid #f4f4f4;
	}
	.bg-containBorder{
		border-bottom: 0rpx solid #f4f4f4;
	}
    .bg-contain text{
		/* width: 120rpx; */
		white-space: nowrap;
		margin-right: 40rpx;
		font-weight: 500;
	}
	.bg-contain text,
	input,textarea{
		color: #333333;
		font-size: 28rpx;
		margin-left: 30upx;
		
	}
	.bg-contain textarea{
		width: 100%;
		flex: 1;
		height: 80rpx;
		font-weight: 400;
		/* min-height: 60rpx; */
	}

	.bg-contain input {
		
		flex: 1;
		color: #999;
		font-weight: 400;
	}
 
	.lineDivider {
		height: 1upx;
		background: #DDDDDD;
		margin-top: 41upx;
		margin-left: 20upx;
		margin-right: 20upx;
	}
    
	.bg-getwx switch {
		margin-right: 20upx;
		margin-left: auto;
	}
	.setDefault{
		font-size: 26rpx;
		color: #333;
		margin-left: 30rpx;
		
	}
	.submit {
		width: 540upx;
		line-height: 84upx;
		height: 84rpx;
		
		margin: 58upx auto 0;
		border-radius: 42rpx;
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}
</style>